<template>
  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
                     <!--    ref="SignCanvas"  v-model="value"    -->
     <div class="canvas-div">
        <sign-canvas ref="fieldEditor" class="sign-canvas" :fieldKey="(field.id + '_canvas')" v-model="value" :options="signCanvasOptions" @confirm="signConfirm"/>
        <div class="canvas-delete-div" @click="canvasClean">
          <i class="el-icon-delete canvas-delete"></i>
        </div>
     </div>

     <!-- <vue-esign ref="esign" :height="300" :isCrop="isCrop" @change="esignChange" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /> -->
  </form-item-wrapper>
</template>

<script>
  import FormItemWrapper from './form-item-wrapper'
  import emitter from 'element-ui/lib/mixins/emitter'
  import i18n from "@/utils/i18n";
  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

// 此插件在监听窗口发售变化时 移动端有问题 移动端弹起键盘和关闭键盘时会去除已签名内容
  import SignCanvas from "sign-canvas";

  export default {
    name: "sign-widget",
    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
    mixins: [emitter, fieldMixin, i18n],
    props: {
      field: Object,
      parentWidget: Object,
      parentList: Array,
      indexOfParentList: Number,
      designer: Object,

      designState: {
        type: Boolean,
        default: false
      },

      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
        type: Number,
        default: -1
      },
      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
        type: Number,
        default: -1
      },
      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
        type: String,
        default: ''
      },

    },
    components: {
      FormItemWrapper,
     
      SignCanvas
    },
    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
        fieldModel: null,
        rules: [],
        lineWidth: 6,
        lineColor: '#000000',
        bgColor: '',
        resultImg: '',
        isCrop: false,
        value: null,
        signCanvasOptions: {
            isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
            lastWriteSpeed: 1, //书写速度 [Number] 可选
            lastWriteWidth: 3, //下笔的宽度 [Number] 可选
            lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
            lineJoin: "bevel", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
            canvasWidth: 300, //canvas宽高 [Number] 可选
            canvasHeight: 300, //高度  [Number] 可选
            isShowBorder: true, //是否显示边框 [可选]
            bgColor: "lightgrey", //背景色 [String] 可选
            borderWidth: 1, // 网格线宽度  [Number] 可选
            borderColor: "lightgrey", //网格颜色  [String] 可选
            writeWidth: 5, //基础轨迹宽度  [Number] 可选
            maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
            minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
            writeColor: "#101010", // 轨迹颜色  [String] 可选
            isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
            imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
        },
      }
    },
    computed: {
      inputType() {
        if (this.field.options.type === 'number') {
          return 'text'  //当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
        }

        return this.field.options.type
      },
      labelWidth() {
        if (!!this.field.options.labelHidden) {
          return 0
        }

        if (!!this.field.options.labelWidth) {
          return this.field.options.labelWidth
        }

        if (!!this.designer) {
          return this.designer.formConfig.labelWidth
        } else {
          return this.formConfig.labelWidth
        }
      },

    },
    beforeCreate() {
      /* 这里不能访问方法和属性！！ */
    },

    created() {
      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */

      // debugger
      console.log("field:"+this.field);
      if(null!=this.field){
          var labelWidth = this.labelWidth;
          if(null!=labelWidth){
               var clientWidth = document.body.clientWidth;  
               var canvasWidth = clientWidth - labelWidth;
               if(null!=canvasWidth&&canvasWidth>300)canvasWidth=300;
               if(null!=canvasWidth&&canvasWidth<100)canvasWidth=100;
               this.signCanvasOptions.canvasWidth = canvasWidth;
               this.signCanvasOptions.canvasHeight = canvasWidth;
          }
         
          
          console.log("labelWidth:"+labelWidth);
          if(null!=this.parentWidget){
            console.log("parentWidget:"+this.parentWidget);
          }
          console.log("clientWidth:"+clientWidth);
      }
      // alert("sing created")
      this.initFieldModel()
      // alert(this.fieldModel)
      this.registerToRefList()
      this.initEventHandler()
      // this.buildFieldRules()

      this.handleOnCreated()
    },

    mounted() {
      this.handleOnMounted()
    },
   

    beforeDestroy() {
      this.unregisterFromRefList()
    },
    watch: {
        value: function(newVal, oldVal) {
            // TO DO
            // console.log("newVal:", newVal);
            // console.log("oldVal:", oldVal);
            var self = this;
            var data = {"type":'sign',"base64Data":newVal};
            self.handleChangeEvent(data);
        }
    },
    methods: {
      esignChange(){
        // console.log(1)
      },
      signConfirm(newValue){
        // if(newValue){
        //   this.value = newValue;
        // }
      },
      canvasClean(){
         this.$refs.fieldEditor.canvasClear();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
  .sign-canvas{
    // max-width: 100%;
    // max-height: 100%;
    border: 2px dotted black;
    background-color: lightgrey;
  }



  .canvas-div{
    display: flex;
    position: relative;
  }

  .canvas-delete-div{
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    // padding: 5px;
    // /* right: 25px; */
    bottom: 5px;
    left: 5px
  }

  .canvas-delete{

  }
</style>
